<template>
  <div class="my-padding">
    <el-form ref="form" :model="form" label-width="7rem">
<!--      <el-form-item>-->
<!--        <span slot="label">设备编号<span class="red">*</span></span>-->
<!--        <el-input v-model="form.deviceCode" type="text" placeholder="请输入设备编号"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item>
        <span slot="label">设备名称</span>
        <el-input v-model="form.deviceName" type="text" placeholder="请输入设备名称"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">规格型号</span>
        <el-input v-model="form.deviceSpec" type="text" placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备价格</span>
        <el-input v-model="form.devicePrice" type="number" placeholder="请输入设备价格(保留两位小数)"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">存放位置编号</span>
        <el-input v-model="form.deviceLoc" type="text" placeholder="请输入存放位置编号"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备描述</span>
        <el-input v-model="form.deviceInfo" type="textarea" placeholder="请输入设备描述"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备状态</span>
        <el-select v-model="form.deviceStatus" placeholder="请选择设备状态"
                   style="width:38%">
          <el-option
            v-for="item in deviceStateList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <span slot="label">设备分类<span class="red">*</span></span>
        <el-select v-model="form.typeId" placeholder="请选择设备分类"
                   style="width:38%">
          <el-option
            v-for="item in deviceTypeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备照片">
        <el-upload
          class="upload-demo"
          ref="upload"
          accept=".png,.jpg,.jpeg"
          :on-change="handleChange"
          :action="uploadUrl"
          :limit="1"
          :show-file-list="true"
          :auto-upload="false"
        >

          <el-button type="primary" slot="trigger">选取文件</el-button>
          <br>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="back">取消</el-button>
        </el-upload>
      </el-form-item>
      <!--      <el-form-item>-->
      <!--        <el-button type="primary" @click="addDevice">添加</el-button>-->

      <!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/deviceInfo";

  export default {
    data() {
      return {
        uploadUrl: '',
        form: {
          deviceCode: "",
          deviceName: "",
          deviceSpec: "",
          devicePrice: undefined,
          deviceLoc: "",
          deviceInfo: "",
          deviceStatus: "",
          typeId: "",
        },
        deviceStateList: [
          {
            key: "1",
            value: "设备正常",
          },
          {
            key: "2",
            value: "设备故障",
          },
        ],
        deviceTypeList: [],
      };
    },
    created() {
      $.tbTypeList().then(res => {
        if (res.success) {
          console.log(res.data)
          this.deviceTypeList = res.data
        }
      })
    },
    methods: {
      handleChange(file) {
        this.uploadfile = file
        this.uploadSuccess = false
      },
      handleSubmit() {

        if (this.uploadfile == "") {
          this.$message({
            message: "请先选择图片",
            type: 'error'
          })
          return
        }
        this.listLoading = true;
        let formData = new FormData()
        // let data = JSON.stringify(this.form)
        formData.append('file', this.uploadfile.raw);
        formData.append("deviceName", this.form.deviceName);
        formData.append("deviceSpec", this.form.deviceSpec);
        formData.append("devicePrice", this.form.devicePrice);
        formData.append("deviceLoc", this.form.deviceLoc);
        formData.append("deviceInfo", this.form.deviceInfo);
        formData.append("deviceStatus", this.form.deviceStatus);
        formData.append("typeId", this.form.typeId);
        formData.append("typeName", this.form.typeName);
        console.log(this.uploadfile)
        $.tbDevicesAdd(formData).then(res => {
          if (res.data == "添加成功") {
            this.$refs.upload.clearFiles()
            // console.log(res.data)
            // this.form.userPhoto = res.data
            this.$message({
              message: "添加成功",
              type: 'success'
            })
            this.uploadSuccess = true
            this.$router.replace({
              path: "index",
            });
          } else {
            this.$message({
              type: "error",
              message: "添加失败，设备编号已存在"
            });
          }
        })
      },
      addDevice() {
        if (!this.validate()) return;
        $.tbDevicesAdd(this.form).then(response => {
          // console.log(response.data)
          if (response.data == "添加成功") {
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.$router.replace({
              path: "index",
            });
          } else {
            this.$message({
              type: "error",
              message: "添加失败，设备编号已存在"
            });
          }
        });
      },

      validate() {
        let error = "";
        if (this.form.deviceCode == "" || this.form.deviceCode == null) {
          error = "请输入设备编号 \n";
        } else if (this.form.devicePrice != null && !/^(\d+)(.\d{0,2})?$/.test(this.form.devicePrice)) {
          error = "价格请保留两位有效数字\n";
          this.form.devicePrice = undefined
        } else if (this.form.typeId == "" || this.form.typeId == null) {
          error = "请选择设备分类\n";
        }
        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      },

      back() {
        this.$router.replace({
          path: "index",
        })
      },
    }
  };
</script>

<style>
  .red {
    color: red;
    font-size: 1.5rem;
    vertical-align: middle;
  }
</style>
